<template>
	<div>
		<h2>用户列表</h2>
		<div class="user_list">
			<!-- 区域选择 -->
			<div>
				<el-checkbox-group v-model="checkedDivisions" @change="handleCheckedCitiesChange">
					<el-checkbox v-for="division in checkedDivisions" :key="division.id" :label="division.administrationName" :value="division">
						{{ division.administrationName }}
					</el-checkbox>
				</el-checkbox-group>
			</div>
            <!-- 组织选择 -->
            <div>
                <el-tag style="margin-right: 10px;margin-bottom: 10px;" v-for="(tag,index) in orgTags" :key="tag.id" closable type="info" @close="closeTag(tag,index)">
                    {{ tag.organizationName||tag.orgHomeName||tag.name }}
                </el-tag>
            </div>
		</div>
		<el-tabs  v-model="activeName" class="demo-tabs" @tab-change="typeChange">
			<el-tab-pane v-if="isAuth('ga_selectCommunity')" label="行政区划" name="division">
				<el-tabs v-model="activeArea" @tab-change="tabChange">
					<el-tab-pane v-if="isAuth('ga_selectArea')" label="区" name="area"></el-tab-pane>
					<el-tab-pane v-if="isAuth('ga_selectStreet')" label="街道" name="strees"></el-tab-pane>
					<el-tab-pane v-if="isAuth('ga_selectCommunity')" label="社区" name="community"></el-tab-pane>
				</el-tabs>
			</el-tab-pane>
			<el-tab-pane label="养老服务组织" name="organization">
				<el-tabs v-model="activeOrg" @tab-change="tabChange">
					<el-tab-pane label="养老机构" name="institution"></el-tab-pane>
					<el-tab-pane label="居家养老服务设施" name="facility"></el-tab-pane>
					<el-tab-pane label="居家养老服务组织" name="homeInstitution"></el-tab-pane>
				</el-tabs>
			</el-tab-pane>
		</el-tabs>
		<!-- 区选择 -->
		<SelectArea
            v-if="activeName=='division'&&activeArea=='area'" 
            @getDivisions="getDivisions" 
            :defaultVal="checkedDivisions">
        </SelectArea>
		<!-- 街道选择 -->
		<SelectStrees
            v-if="activeName=='division'&&activeArea=='strees'"
            @getDivisions="getDivisions"
            :defaultVal="checkedDivisions"
            >
        </SelectStrees>
        <!-- 社区选择 -->
        <SelectCommunity
            v-if="activeName=='division'&&activeArea=='community'" 
            @getDivisions="getDivisions"
            :defaultVal="checkedDivisions"
            >
        </SelectCommunity>
        <!-- 养老机构 -->
        <Institution :key="reloadKey"
        v-if="activeName=='organization'&&activeOrg=='institution'"
        :listType="listType"
        @selection-change="onSelectionChange"
        :selectedData="selectedData"
        ref="orgEl"
        ></Institution>
        <!-- 养老设施 -->
        <Facility
        :key="reloadKey"
        v-if="activeName=='organization'&&activeOrg=='facility'"
        :listType="listType"
        @selection-change="onSelectionChange"
        :selectedData="selectedData"
        >
        </Facility>
        <!-- 居家养老服务组织 -->
        <HomeInstitution
        :key="reloadKey"
        v-if="activeName=='organization'&&activeOrg=='homeInstitution'"
        :listType="listType"
        @selection-change="onSelectionChange"
        :selectedData="selectedData"
        >

        </HomeInstitution>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SelectArea from '../divisionFilter/selectArea/index.vue'
import SelectStrees from '../divisionFilter/selectStrees/index.vue'
import SelectCommunity from '../divisionFilter/selectCommunity/index.vue'
import Institution from '../orgFliter/institution/index.vue'
import Facility from '../orgFliter/facility/index.vue'
import HomeInstitution from '../orgFliter/homeInstitution/index.vue'
import {isAuth} from '@/utils/util'

let Props = defineProps({
    infoArea:{
        type:String,
        default:""
    }
})

let emits = defineEmits(['getFilterData'])
const orgEl = ref(null)
let orgTags = ref([])

let activeName = ref('division')
let activeArea = ref('area')
let activeOrg = ref('institution')
// 根据权限去判断当前激活值
const judgeCurrentActive = () =>{
    if(!isAuth('ga_selectCommunity')&&!isAuth('ga_selectStreet')&&!isAuth('ga_selectArea')){
        // 无区级
        activeArea.value = 'community'
        activeName.value = 'organization'
        activeOrg.value = "institution"
    }else if(!isAuth('ga_selectArea')&&!isAuth('ga_selectStreet')){
        // 社区级
        activeArea.value = 'community'
    }else if(!isAuth('ga_selectArea')){
        // 街道级
        activeArea.value = 'strees'
    }
}
judgeCurrentActive()

let listType = ref([])
let selectedData:any = ref([])
let checkedDivisions = ref([])
let dimension = ref("AREA")
const getDivisions = (value) => {
	checkedDivisions.value = value
    let list = checkedDivisions.value.map(el=>{
        return {label:el.administrationName,value:el.id,dimension:dimension.value}
    })
    emits('getFilterData',{type:'area',list,dimension:dimension.value})
}
const reloadKey = ref(0)

const handleCheckedCitiesChange = () => {}
const onSelectionChange = (val) =>{
    orgTags.value = val
    let list =  orgTags.value.map(el=>{
        if(activeOrg.value=='institution'){
            return {label:el.organizationName,value:el.creditCode}
        }else if(activeOrg.value=='facility'){
            return {label:el.soleValue,value:el.soleValue}
        }else if(activeOrg.value=='homeInstitution'){
            return {label:el.orgHomeName,value:el.uniqueValue}
        }
    })
    emits('getFilterData',{type:activeOrg.value,list,dimension:dimension.value})
}
const closeTag = (tag,index) =>{
    const indexKey = orgTags.value.find(item=>item.id == tag.id)
    orgTags.value.splice(indexKey,1)
    selectedData.value =  orgTags.value
    reloadKey.value = Math.random()
}

//["AREA","STREET","COMMUNITY","ORGANIZATION"]
const typeChange = (e) =>{
    // 清空下用户列表
    selectedData.value = []
    checkedDivisions.value = []
    orgTags.value = []
    // 处理一下获取下发信息
    if(e=="organization"){
        dimension.value = 'ORGANIZATION'
    }else if(e=="division"){
        if(activeArea.value=='area'){
        dimension.value = 'AREA'
        }else if(activeArea.value=='strees'){
            dimension.value = 'STREET'
        }else if(activeArea.value=='community'){
            dimension.value = 'COMMUNITY'
        }
    }
    emits('getFilterData',{type:activeOrg.value,list:[],dimension:dimension.value})
}
const tabChange = (e) =>{
    if(e=='area'){
        dimension.value = 'AREA'
    }else if(e=='strees'){
        dimension.value = 'STREET'
    }else if(e=='community'){
        dimension.value = 'COMMUNITY'
    }
    selectedData.value = []
    checkedDivisions.value = []
    orgTags.value = []
    emits('getFilterData',{type:activeOrg.value,list:[],dimension:dimension.value})
}
</script>
<style scoped lang="scss">
.user_list {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	border: 1px solid#e4e7ed;
	border-radius: 10px;
	margin: 20px 0;
}
</style>
